<!DOCTYPE html>
<html lang="en" style="background: #FFFFFF;height: 100%">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta
            name="description"
            content="KLineChart example"/>
    <title>KLineChart + js</title>
    <script type="text/javascript" src="/web/static/quote/jquery.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/klinecharts@8.5.0/dist/klinecharts.min.js"></script>
    <script type="text/javascript" src="/web/static/js/kline.js"></script>
</head>
<body style="margin: 0;height: 100%">
<div id="chart" style="height: 100%"></div>
<script>
    window.onload = function () {

        options = {
            candle: {
                bar: {
                    upColor: 'red',
                    downColor: 'green',
                    noChangeColor: '#888888'
                },
                priceMark: {
                    last: {
                        show: true,
                        upColor: 'red',
                        downColor: 'green',
                        noChangeColor: '#888888'
                    }
                }
            },
            technicalIndicator: {
                bar: {
                    upColor: 'red',
                    downColor: 'green',
                    noChangeColor: '#888888'
                },
                circle: {
                    upColor: 'red',
                    downColor: 'green',
                    noChangeColor: '#888888'
                }
            }
        }
        // 初始化图表
        var chart = klinecharts.init('chart', options)
        // 创建一个主图技术指标
        chart.createTechnicalIndicator('MA', false, {id: 'candle_pane'})
        // 创建一个副图技术指标VOL
        chart.createTechnicalIndicator('VOL')
        // 创建一个副图技术指标MACD
        chart.createTechnicalIndicator('MACD')
        // 加载数据

        $.ajax({
            /*type = "get",*/
            url: '/stock',
            dateType: "JSON",
            timeout: 1000,
            success: function (data, textStatus, jqXHR) {
                {#alert(data)#}

                var chartDataList = data.map(function (item) {
                    return {
                        timestamp: new Date(item[0]).getTime(),
                        open: item[1],
                        close: item[2],
                        high: item[3],
                        low: item[4],
                        volume: Math.ceil(item[5]),
                    }
                })
                chart.applyNewData(chartDataList)
            },
            error: function (xhr, textStatus) {
                if (textStatus == 'timeout') {
                    // Treat timeout logic
                    $.messager.alert("操作提示", "timeout！", "warning");

                } else {
                    console.log('error:' + textStatus);

                }
            }
        });
    }
</script>
</body>
</html>